 <!DOCTYPE html>
<html lang="zh" style="background-color: #fff;" >
<head>
  <meta charset="utf-8" />
 
 
   <link rel="stylesheet" href="${mvcPath}/dacp-view/aijs/css/ai.css" type="text/css" />
   <link href="${mvcPath}/dacp-res/me/css/ai.meta.css" type="text/css" rel="stylesheet"/>
   
<script type="text/javascript" src="${mvcPath}/dacp-lib/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="${mvcPath}/dacp-lib/bootstrap/js/bootstrap.min.js"></script>
<script src="${mvcPath}/dacp-res/js/jquery.tmpl.min.js"></script>

 <script src="${mvcPath}/dacp-lib/cryptojs/aes.js" type="text/javascript"></script>
<script src="${mvcPath}/crypto/crypto-context.js" type="text/javascript"></script>
<script src="${mvcPath}/dacp-view/aijs/js/ai.core.js"></script>
<script src="${mvcPath}/dacp-view/aijs/js/ai.jsonstore.js"></script>
<script src="/me/dacp-view/aijs/js/ai.grid.js"></script>

<style>
 body {
      font-family: 微软雅黑,Helvetica,Arial,sans-serif;  
    } 
}
.nav-tabs li.active{
   border-bottom-color: rgb(48, 153, 245);
}
.nav-tabs li.active a{
  color: white;
    background: rgb(48, 153, 245);
}
 .padder-v {
    padding-top:  5px;
    padding-bottom:  5px;  
}
</style>

<script>
function buildinstTabGrid(){
var instgridcfg={id:'instanceTabGrid',split:'',region:'center',title:'',width:120,height:120,cfgcode:'',subtype:'edgrid', //grid,ghgrid,expandgrid,edgrid,groupgrid, 
		store:tabInsStore,
		columns:[
			{ "header":"数据库","width":91,"sortable":true,"dataIndex":"DBNAME" ,render:getDBCNName},
			{ "header":"实例表名","width":295,"sortable":true,"dataIndex":"DATANAME",render1:function(rec){
				return "<b><font color=blue size=5>"+rec.get('DATANAME')+"</font></b>";
			}},
			{ "header":"表或视图","width":191,"sortable":true,"dataIndex":"DATATYPE"  },
			{ "header":"表空间","width":81,"sortable":true,"dataIndex":"TABSPACE" },
			{ "header":"创建时间","width":81,"sortable":true,"dataIndex":"EFF_DATE" },
			{ "header":"字段数","width":281,"sortable":true,"dataIndex":"FIELDNUM" },
			{ "header":"行数","width":81,"sortable":true,"dataIndex":"ROWNUM" },
			{ "header":"预计删除日期","width":81,"sortable":true,"dataIndex":"DROPDATE" }
		],
		containerId:'instanceTabGrid'
	};
	var instTabGrid = new AI.Grid(instgridcfg);
};
function buildColGrid(){
	var tabname = 'D_MFI_PIC_TYPE_CAL_A';
	var tabcolsql ="select col_seq,lcase(colname) colname,colcnname,lcase(datatype) datatype,length,remark,isnullable,key_seq from COLUMN_VAL where dataname='"+tabname+"' order by col_seq";
	var tabColStore= new AI.JsonStore({
		sql:tabcolsql,
		pageSize:-1,
		key:'DATANAME',
		dataSource:'METADB'
	});
	var gridcfg={id:'cfgtabColgrid',split:'',region:'center',title:'',width:120,height:120,cfgcode:'',subtype:'edgrid', //grid,ghgrid,expandgrid,edgrid,groupgrid, 
			store:tabColStore,
			columns:[
				{ "header":"编号","width":70,"sortable":true,"dataIndex":"COL_SEQ" },
		        { "header":"字段名","width":130,"sortable":true,"dataIndex":"COLNAME",render1:function(rec){return "<b><font color=blue size=5>"+rec.get('COLNAME')+"</font></b>";}},
		        { "header":"中文名","width":130,"sortable":true,"dataIndex":"COLCNNAME"  },
		        { "header":"类型","width":81,"sortable":true,"dataIndex":"DATATYPE" },
		        { "header":"长度","width":81,"sortable":true,"dataIndex":"LENGTH" },
		        { "header":"允许为空","width":81,"sortable":true,"dataIndex":"ISNULLABLE" },
		        { "header":"分区键","width":81,"sortable":true,"dataIndex":"KEY_SEQ" } ,
		        { "header":"字段授权","width":81,"sortable":true,"dataIndex":"COLCNNAME",render:function(rec){
		        	if(/号码/.test(rec.get('COLCNNAME'))){
		        		return '<span class="label bg-info m-l-xs">敏感</span>';
		        	}else{
		        		return '<span class="label bg-info m-l-xs">非敏感</span>';
		        	}
				}}
		       ],
			containerId:'tabColgrid'
		};
		var dataGrid = new AI.Grid(gridcfg);
}
function buildCardInfo(options){
	var htmltpl='<div class="panel panel-default"><div class="panel-body" style="color:white;min-height:120px;background: #4cb6cb;"><h4>{objname}</h4><p>{cnname}</p><p>{dbname}</p></div><div class="panel-footer bg-light lter text-center"><div class="row pull-out"><div class="col-xs-4"><a href="#"   style="color:red"><div class="padder-v "><span class="m-b-xs h5 block">{usernum}</span><small class="text-muted ">使用人数</small></div></a></div><div class="col-xs-4 dk"><a href="#"  style="color:red"><div class="padder-v "><span class="m-b-xs h5 block">{usertimes}</span><small class="text-muted ">使用次数</small></div></a></div><div class="col-xs-4"><a href="#"   style="color:red"><div class="padder-v "><span class="m-b-xs h5 block"><span class="glyphicon glyphicon-thumbs-up"></span></span><small class="text-muted ">评价</small></div></a></div></div></div></div>';
	var html=htmltpl.replace("{objname}",options.objname)
	           		.replace("{cnname}",options.cnname)
	                .replace("{dbname}",options.dbname)
	                .replace("{usernum}",options.usernum)
	                .replace("{usertimes}",options.usertimes);
	
    $("#"+options.containerId).empty().append(html);
}
$(document).ready(function() {
	buildCardInfo({containerId:"cardinfo",objname:'用户资料信息',cnname:'mytable',dbname:'数据资源|元数据库',usernum:394,usertimes:33});
	buildColGrid();
});
</script>
</head>
<body>
<div class="container-fruit" style="margin:10px 30px 0px 30px">
<div class="row"> 
   <div class="col-lg-3 col-md-3" id="cardinfo"> </div> 
   <div class="col-md-3" style="border: 1px solid #F2F5F5;"> 
    <h4>基本信息</h4> 
    <table class="table table-condensed table-responsive table-user-information"> 
     <tbody> 
      <tr> 
       <td>敏感级别:</td> 
       <td id="RIGHTLEVEL"></td> 
      </tr> 
      <tr> 
       <td>层次:</td> 
       <td id="SCHEMA_NAME">SCHEMA_NAME</td> 
      </tr> 
      <tr> 
       <td>归属主题:</td> 
       <td id="TOPICNAME">TOPICNAME</td> 
      </tr> 
      <tr> 
       <td>状态:</td> 
       <td id="STATE">STATE</td> 
      </tr> 
      <tr> 
       <td>创建时间</td> 
       <td><span id="EFF_DATE"></span><span class="badge" id="VERSEQ">v1.0.0.1</span></td> 
      </tr> 
     </tbody> 
    </table> 
   </div> 
   <div class="col-md-3" style="border: 1px solid #F2F5F5;"> 
    <h4>存储信息</h4> 
    <table class="table table-condensed table-responsive table-user-information"> 
     <tbody> 
      <tr> 
       <td>仓库:</td> 
       <td><span class="label bg-info m-l-xs">Y</span></td> 
      </tr> 
      <tr> 
       <td>web库:</td> 
       <td><span class="label bg-info m-l-xs">Y</span></td> 
      </tr> 
      <tr> 
       <td>云平台:</td> 
       <td><span class="label bg-info m-l-xs">N</span></td> 
      </tr> 
      <tr> 
       <td>地市库:</td> 
       <td><span class="label bg-info m-l-xs">Y</span></td> 
      </tr> 
      <tr> 
       <td>表大小</td> 
       <td>字段数<span id="FIELDNUM"></span>,行:<span id="ROWNUM"></span> </td> 
      </tr> 
     </tbody> 
    </table> 
   </div> 
   <div class="col-md-3" style="border: 1px solid #F2F5F5;"> 
    <h4>应用信息</h4> 
    <table class="table table-condensed table-responsive table-user-information"> 
     <tbody> 
      <tr> 
       <td>当前可用周期:</td> 
       <td><span id="DWDBMIN"></span>-<span id="DWDBMAX"></span> </td> 
      </tr> 
      <tr> 
       <td>ETL引用次数:</td> 
       <td id="REFCOUNT">REFCOUNT</td> 
      </tr> 
      <tr> 
       <td>应用引用次数:</td> 
       <td></td> 
      </tr> 
      <tr> 
       <td>数据生成时间:</td> 
       <td id="STATE"></td> 
      </tr> 
      <tr> 
       <td>重要程度</td> 
       <td></td> 
      </tr> 
     </tbody> 
    </table> 
   </div> 
 </div> 
 <div class="row">
      <div class="col-md-12">
      <ul class="nav nav-tabs"  >
        <li class="active"><a href="#tab2" data-toggle="tab" aria-expanded="true">表详细信息</a></li>
        <li class=""><a href="#tab3" data-toggle="tab" aria-expanded="false">字段信息</a></li>
        <li class=""><a href="#tab4" data-toggle="tab" aria-expanded="false" style="">表授权情况</a></li>
        <li class=""><a href="#tab5" data-toggle="tab" aria-expanded="false" style="">实例表情况</a></li>
      </ul>
      
     
    <div class="tab-content">
    
      <div id="tab2" class="tab-pane active">
	      <div style="line-height:2">
	      	<div>接口地址：http://bigdata.sd.10086.cn/api/query/AreaAgeLevel</div>
			<div>支持格式：JSON/XML</div>
			<div>请求方式：GET/POST</div>
			<div>请求示例：http://bigdata.sd.10086.cn/api/query/AreaAgeLevel?jingqu_id=5311001token=Bh7f1A0K&amp;key=您申请的APPKEY</div>
	      </div>
      </div>
      <div id="tab3" class="tab-pane">
          <br><br>
          <div id="tabColgrid"></div>
      </div>
      <div id="tab4" class="tab-pane">
		 
      </div>
      <div id="tab5" class="tab-pane">
	      
      </div>
      </div>  
    </div>
 
    </div>

     
</div>
</body>
</html>